<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no"/>
		<link rel="stylesheet" type="text/css" href="/css/ecsjiankong/common.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="app">
			<div class="info_left">
				<div class="esc_title">
					实例信息
				</div>
				<div class="esc_body">
					<div class="card">
						 <span>所在区:</span> <a th:text="${ecs.InstanceId}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>实例名:</span> <a th:text="${ecs.InstanceName}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>状 态:</span> <a th:text="${ecs.Status}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>镜像ID:</span> <a th:text="${ecs.ImageId}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>区域ID:</span> <a th:text="${ecs.RegionId}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>Cpu数:</span> <a th:text="${ecs.Cpu}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>内存:</span> <a th:text="${ecs.Memory}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>ip(公网):</span> <a th:text="${ecs.PublicIpAddress}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>入网带宽:</span> <a th:text="${ecs.InternetMaxBandwidthIn}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>出网带宽:</span> <a th:text="${ecs.InternetMaxBandwidthOut}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>创建时间:</span> <a th:text="${ecs.CreationTime}">华北2可用区</a>
					</div>
					<div class="card">
						 <span>到期时间:</span> <a th:text="${ecs.ExpiredTime}">华北2可用区</a>
					</div>
				</div>
			</div>
			<div class="info_rigth">
				  <div class="runtime_title">
						运行监控
				  </div>
				  <div class="dateslect">
						<input type="" name="" id="test1"  placeholder="开始时间" /> 
						- 
						<input type="" name="" id="test2"  placeholder="结束时间" />
						<select  id="period">
							<option value="60">1分钟</option>
							<option  value="600">10分钟</option>
							<option  value="3600">1小时</option>
						</select>
						<button id="queding">确定</button>
				  </div>
				  <div id="cpu" style="width: 100%;height:200px;"></div>
				  <div id="net" style="margin-top: 20px; width: 100%;height:200px;"></div>	  
				  <div id="disk" style="margin-top: 20px; width: 100%;height:200px;"></div>	  
			</div>
		</div>
		<script type="text/javascript" th:inline="javascript">
			// 基于准备好的dom，初始化echarts实例
			var cpu = echarts.init(document.getElementById('cpu'));
			var net = echarts.init(document.getElementById('net'));	
			var disk = echarts.init(document.getElementById('disk'));		
				
			layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  
			  //执行一个laydate实例
			  laydate.render({
				elem: '#test1',
				type: 'datetime'//指定元素
			  });
			  
			  //执行一个laydate实例
			  laydate.render({
				elem: '#test2', //指定元素
				type: 'datetime'
			  });
			  
			});	
				
				
				
			function getData(){
				$.ajax({
						type: "post",
						url: "/f/getEcsMonitorData",
						data:{
							startTime:$("#test1").val(),
							endTime:$("#test2").val(),
							id:[[${ecsId}]],
							period:$("#period").val()
						},
						async:false, 
						success: function(data) {		
							// 指定图表的配置项和数据
							var option1 = {
									title: {
										text: 'cpu'
									},
									tooltip: {
										trigger: 'axis'
									},
									legend: {
										data:['cpu']
									},
									grid: {
										left: '3%',
										right: '4%',
										bottom: '3%',
										containLabel: true
									},
									toolbox: {
										feature: {
											saveAsImage: {}
										}
									},
									xAxis: {
										type: 'category',
										boundaryGap: false,
										data: data.dateArray
										
									},
									yAxis: {
										type: 'value',
										axisLabel: {
											formatter: '{value} %'
										}
									},
									series: [
										{
											name:'cpu',
											type:'line',
											stack: '总量',
											data:data.cpuarray
										}
									]
								};
								
								var option2 = {
										title: {
											text: '网络信息'
										},
										tooltip: {
											trigger: 'axis'
										},
										legend: {
											data:['出网流量','入网流量']
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										toolbox: {
											feature: {
												saveAsImage: {}
											}
										},
										xAxis: {
											type: 'category',
											boundaryGap: false,
											data: data.dateArray
											
										},
										yAxis: {
											type: 'value',
											axisLabel: {
												formatter: '{value} kbit'
											}
										},
										series: [
											{
												name:'出网流量',
												type:'line',
												stack: '总量',
												data:data.txNetworkarray
											},
											{
												name:'入网流量',
												type:'line',
												stack: '总量',
												data:data.txNetworkarray
											}
										]
									};
								var option3 = {
										title: {
											text: '硬盘信息'
										},
										tooltip: {
											trigger: 'axis'
										},
										legend: {
											data:['读','写']
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										toolbox: {
											feature: {
												saveAsImage: {}
											}
										},
										xAxis: {
											type: 'category',
											boundaryGap: false,
											data: data.dateArray
											
										},
										yAxis: {
											type: 'value',
											axisLabel: {
												formatter: '{value} byte'
											}
										},
										series: [
											{
												name:'读',
												type:'line',
												stack: '总量',
												data:data.iopsReadArray
											},
											{
												name:'写',
												type:'line',
												stack: '总量',
												data:data.iopsWaitArray
											}
										]
									};
							cpu.setOption(option1);	
							net.setOption(option2);
							disk.setOption(option3);
						},
						error: function() {
							alert("错误");
						}
					});
			}
			
			
			 getData();
			 
			 $("#queding").click(function(){
				 getData();
			 });
			 
			
		</script>
	</body>
</html>
